/*
 * @: 
 * @Version: 1.0
 * @Autor: ziwei
 * @Date: 2021-11-16 14:35:16
 * @LastEditors: ziwei
 * @LastEditTime: 2021-12-02 18:10:06
 */
import React from 'react'
import dva,{connect} from './dva'
import { Router,Route,Link,routerRedux } from './dva/router';
import { push } from "connected-react-router";
const app = dva();
app.model({
  namespace:'counter',
  start:{number:0},//每个命名空间都有自己的状态
  //同步的
  reducers:{
    //reducers 对象key就相当于actionType,值是本state对应的处理函数，state是此命名空间下的分状态
    add(state,action){
      return {number:state.number+1};
    },
    minus(state,action){
      return {number:state.number -1}
    },
    //异步的
    effects:{
      //effects:call:调用一个方法 put派发一个动作
      *asyncAdd(action,{call,put}){
        //call 调用一个方法 派发一个指令
        yield call(delay,1000);
        //在model的effects中如果派发动作给自己的模型的话，是不需要添加namespace前缀
        //派发一个动作
        yield put({type:'counter/add'})
      },
      *goto({to},{put}){
        //我希望在这里跳转到首页去 saga不能直接跳转 派发一个跳转到首页的动作
        yield put(routerRedux.push(to))
      }
    }
  }
})

function Counter(props){
  return(<div>
         <p>{props.number}</p>
         <button onClick={()=>props.diapatch({type:'counter/add'})}>+</button>
         <button onClick={()=>props.diapatch({type:'counter/asyncAdd'})}>asyncAdd</button>
         <button onClick={()=>props.diapatch({type:'counter/goto',to:'/'})}>跳转到/</button>
      </div>
  )
}

const ConnectedCounter = connect(state=>state.counter//counter第二个参数如果没有传，默认会把store.dispatch当成参数传给组件
                                )(Counter);
//定义要渲染的内容
app.router((api)=><ConnectedCounter history={api.history}>
  <>
  <Link to='/'>Home</Link>
  <Link to='/counter'>Counter</Link>
  <Route path='/' component={Home} exact={true}></Route>
  <Route path='/counter' component={ConnectedCounter}></Route>
  </>
</ConnectedCounter>)
 //开始渲染
 app.start('#root')

function delay(ms){
  return new Promise(resolve=>{
    setTimeout(resolve,ms)
  })
}

